<template>
  <view class="huangLi">
    <view class="huang_left">
      <view class="right_top">
        <view class="date_box">
          <view
            class="date_detail"
            style="margin-top: 0"
            v-for="(item, i) in getText(dayDetail.year)"
            :style="{
              color: i === 0 ? '#ca4336' : '#262626',
              marginLeft: i === 1 ? '8rpx' : '0rpx',
            }"
            :key="i"
            >{{ item }}
          </view>
        </view>
        <view class="date_box">
          <view
            class="date_detail"
            v-for="(item, i) in getText(dayDetail.month)"
            :style="{
              color: i === 0 ? '#ca4336' : '#262626',
              marginLeft: i === 1 ? '8rpx' : '0rpx',
            }"
            :key="i"
            >{{ item }}
          </view>
        </view>
        <view class="date_box">
          <view
            class="date_detail"
            v-for="(item, i) in getText(dayDetail.day)"
            :style="{
              color: i === 0 ? '#ca4336' : '#262626',
              marginLeft: i === 1 ? '8rpx' : '0rpx',
            }"
            :key="i"
            >{{ item }}
          </view>
        </view>
      </view>
      <view class="jieQi"> {{ dayDetail.prevJieQi }} </view>
      <view class="yiBox">
        <view class="yi">宜</view>
        <view class="yi_list">
          <view v-for="(item, i) in dayDetail.dayYi" :key="i">{{ item }}</view>
        </view>
      </view>
      <view class="yi_trend">
        <view class="text" style="padding-left: 9rpx">吉神宜趋</view>
        <view class="yi_list">
          <view v-for="(item, i) in dayDetail.dayJiShen" :key="i">{{
            item
          }}</view>
        </view>
      </view>
      <view class="advice_box" v-if="dayDetail.pengZu">
        <view class="pengZu">彭祖</view>
        <view style="margin-top: 9rpx; textAlign: center" clAss="text">{{
          getPengZu(dayDetail.pengZu)[0]
        }}</view>
        <view class="pengZu">彭祖</view>
        <view style="margin-top: 9rpx; textAlign: center" class="text">{{
          getPengZu(dayDetail.pengZu)[1]
        }}</view>
      </view>
      <view class="bottom_box">
        <view style="display: flex">
          <view class="text">月名</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.yueName
          }}</view>
        </view>
        <view style="display: flex">
          <view class="text">月相</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.yueXiang
          }}</view>
        </view>
        <view style="display: flex; flex-wrap: wrap">
          <view class="text" style="flex: 2">物候</view>
          <view class="text">{{ dayDetail.wuHou }}</view>
        </view>
      </view>
    </view>
    <view class="huang_middle">
      <view class="data_center">
        <view class="day_data">
          <view style="display: flex">
            <view> {{ dayDetail.solarYear }}</view>
            <view style="margin-left: 20rpx">年</view></view
          >
          <view style="display: flex">
            <view> {{ dayDetail.solarMonth }}</view>
            <view style="margin-left: 30rpx">月</view></view
          >
          <view style="display: flex">
            <view> {{ dayDetail.solarDay }}</view>
            <view style="margin-left: 30rpx">日</view></view
          >
        </view>
        <view class="day_data" style="justify-content: center">{{
          dayDetail.solar
        }}</view>
        <view class="option_box">
          <img
            @click="changeDay('pre')"
            class="icon-option"
            style="margin-right: 53rpx"
            src="@/static/images/calendar/icon-pre.png"
            alt=""
          />
          <view class="today_text"> {{ dayDetail.solarDay }}</view>
          <img
            @click="changeDay"
            style="margin-left: 53rpx"
            class="icon-option"
            src="@/static/images/calendar/icon-next.png"
            alt=""
          />
        </view>
        <view class="data_yin">
          {{ dayDetail.lunar }}
        </view>
      </view>

      <view class="position_box">
        <view class="position_top">
          <view style="display: flex">
            <view style="height: 381rpx" class="caiWei">财神位</view>
            <view>
              <view class="position_detail">
                <view
                  class="shen_box"
                  style="height: 130rpx"
                  :style="{ borderBottom: i === 2 ? 'none' : '' }"
                  v-for="(item, i) in ['喜神', '福神', '财神']"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view>
            </view>
            <view>
              <view class="position_detail" style="border-left: none">
                <view
                  class="shen_box"
                  style="height: 130rpx"
                  :style="{ borderBottom: i === 2 ? 'none' : '' }"
                  v-for="(item, i) in [
                    dayDetail.dayPositionXiDesc,
                    dayDetail.dayPositionFuDesc,
                    dayDetail.dayPositionCaiDesc,
                  ]"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view></view
            >
          </view>
          <view>
            <view style="display: flex">
              <view style="height: 185rpx" class="caiWei">阴阳贵神</view>
              <view class="position_detail" style="width: 70rpx">
                <view
                  class="shen_box"
                  style="height: 90rpx"
                  :style="{ borderBottom: i === 1 ? 'none' : '' }"
                  v-for="(item, i) in ['阳贵神', '阴贵神']"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view>
              <view
                class="position_detail"
                style="border-left: none; width: 70rpx; border-right: none"
              >
                <view
                  class="shen_box"
                  style="height: 90rpx"
                  :style="{ borderBottom: i === 1 ? 'none' : '' }"
                  v-for="(item, i) in [
                    dayDetail.dayPositionYinGuiDesc,
                    dayDetail.dayPositionYangGuiDesc,
                  ]"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view>
            </view>
            <view style="display: flex; border-top: 2rpx solid #ca4336">
              <view style="height: 190rpx" class="caiWei">九宫飞星</view>
              <view class="position_detail" style="width: 70rpx">
                <view
                  class="shen_box"
                  style="height: 100rpx"
                  :style="{ borderBottom: i === 1 ? 'none' : '' }"
                  v-for="(item, i) in ['九星', '二十八宿']"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view>
              <view
                class="position_detail"
                style="border-left: none; width: 70rpx; border-right: none"
              >
                <view
                  class="shen_box"
                  style="height: 100rpx"
                  :style="{ borderBottom: i === 1 ? 'none' : '' }"
                  v-for="(item, i) in [
                    `${dayDetail.dayNineStar.number}${dayDetail.dayNineStar.color}${dayDetail.dayNineStar.wuXing}${dayDetail.dayNineStar.nameInBeiDou} `,
                    dayDetail.xingXiu,
                  ]"
                  :key="i"
                >
                  {{ item }}
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="position_top" style="border-bottom: none">
          <view class="caiWei" style="height: 270rpx">空亡所值</view>
          <view class="position_detail">
            <view
              class="shen_box"
              style="height: 90rpx"
              :style="{ borderBottom: i === 2 ? 'none' : '' }"
              v-for="(item, i) in ['年', '月', '日']"
              :key="i"
            >
              {{ item }}
            </view>
          </view>
          <view class="position_detail" style="border-left: none">
            <view
              class="shen_box"
              style="height: 90rpx"
              :style="{ borderBottom: i === 2 ? 'none' : '' }"
              v-for="(item, i) in [
                dayDetail.yearXunKong,
                dayDetail.monthXunKong,
                dayDetail.dayXunKong,
              ]"
              :key="i"
            >
              {{ item }}
            </view>
          </view>
          <view class="caiWei" style="height: 270rpx">九宫飞星</view>
          <view class="position_detail" style="width: 70rpx">
            <view
              class="shen_box"
              style="height: 135rpx"
              :style="{ borderBottom: i === 1 ? 'none' : '' }"
              v-for="(item, i) in [dayDetail.zhiShui, dayDetail.fenBing]"
              :key="i"
            >
              {{ item }}
            </view>
          </view>
          <view
            class="position_detail"
            style="border-left: none; width: 70rpx; border-right: none"
          >
            <view
              class="shen_box"
              style="height: 135rpx"
              :style="{ borderBottom: i === 1 ? 'none' : '' }"
              v-for="(item, i) in [
                dayDetail.deJinian,
                dayDetail.gengTian,
              ]"
              :key="i"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="huang_right">
      <view class="right_top">
        <view style="display: flex">
          <view class="text">相冲</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.dayChongDesc
          }}</view>
        </view>
        <view style="display: flex">
          <view class="text">值神</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.zhiXing
          }}</view>
        </view>
        <view style="display: flex; flex-wrap: wrap">
          <view class="text" style="flex: 2">十二神</view>
          <view class="text">{{ dayDetail.dayTianShen }}</view>
        </view>
      </view>
      <view style="width: 160rpx" class="jieQi">
        {{ dayDetail.nextJieQi }}
      </view>
      <view class="yiBox">
        <view class="yi">忌</view>
        <view class="yi_list">
          <view v-for="(item, i) in dayDetail.dayJi" :key="i">{{ item }}</view>
        </view>
      </view>
      <view class="yi_trend">
        <view class="text" style="padding-left: 9rpx">凶煞宜趋</view>
        <view class="yi_list">
          <view v-for="(item, i) in dayDetail.dayXiongSha" :key="i">{{
            item
          }}</view>
        </view>
      </view>
      <view class="advice_box">
        <view class="pengZu">本月胎神</view>
        <view style="margin-top: 9rpx; textAlign: center" clAss="text">
          {{ dayDetail.monthPositionTai }}
        </view>
        <view class="pengZu">今日胎神</view>
        <view style="margin-top: 9rpx; textAlign: center" class="text">
          {{ dayDetail.dayPositionTai }}
        </view>
      </view>
      <view class="bottom_box">
        <view style="display: flex">
          <view class="text">岁煞</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.daySha
          }}</view>
        </view>
        <view style="display: flex">
          <view class="text">六曜</view>
          <view style="margin-left: 54rpx" class="text">{{
            dayDetail.liuYao
          }}</view>
        </view>
        <view style="display: flex; flex-wrap: wrap">
          <view class="text" style="flex: 2">日禄</view>
          <view class="text" style="flex: 3">{{ dayDetail.dayLu }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    dayDetail: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    getText() {
      return function (item) {
        if (item) {
          return [item.slice(0, 3), item.slice(3, -1)];
        }
      };
    },
    getPengZu() {
      return function (item) {
        if (item) {
          //取item的后8位

          return [item.slice(0, 8), item.substr(-8)];
        }
      };
    },
  },
  methods: {
    changeDay(e) {
      this.$emit("changeDate", e === "pre" ? "pre" : "next");
    },
  },
};
</script>

<style lang="scss" scoped>
.huangLi {
  width: 100%;
  // min-height: 1000rpx;
  border: 2rpx solid #ca4336;
  display: flex;
}
.huang_left {
  width: 162rpx;
}
.huang_middle {
  flex: 1;
}
.huang_right {
  width: 162rpx;
}
.date_box {
  // padding: 12rpx 0 12rpx 10rpx;
  display: flex;
  flex-wrap: wrap;
  .date_detail {
    font-size: 14rpx;
    // margin-top: 22rpx;
    color: #262626;
  }
}
.jieQi {
  width: 162rpx;
  height: 36rpx;
  background: #ca4336;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12rpx;
}
.yiBox {
  padding: 11rpx 0 0rpx 0;
  height: 195rpx;
  border-bottom: 2rpx solid #ca4336;
  overflow-y: scroll;
}
.yi {
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #448156;
  padding-bottom: 6rpx;
}
.yi_list {
  display: flex;
  justify-content: flex-start;
  padding: 12rpx 15rpx 0 10rpx;
  flex-wrap: wrap;
  color: #262626;
  font-size: 14rpx;
  view {
    margin-right: 10rpx;
  }
}
.yi_trend {
  height: 233rpx;
  padding: 13rpx 0 0 0rpx;
  border-bottom: 2rpx solid #ca4336;
  overflow-y: scroll;
}
.text {
  font-size: 14rpx;
  color: #ca4336;
}
.advice_box {
  padding: 4rpx 6rpx 11rpx 6rpx;
}
.pengZu {
  width: 150rpx;
  height: 32rpx;
  background: #ca4336;
  border: 1px solid #ca4336;
  color: #fff;
  font-size: 14rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom_box {
  padding: 13rpx 6rpx 0rpx 4rpx;
  border-top: 2rpx solid #ca4336;
  height: 114rpx;
  overflow-y: scroll;
}

.right_top {
  padding: 10rpx 12rpx 12rpx 10rpx;
  min-height: 114rpx;
}
.data_center {
  background: #ca4336;
  min-height: 260rpx;
  padding: 0 16rpx 0 26rpx;
}
.day_data {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: #ffffff;
  padding-top: 30rpx;
}
.option_box {
  margin-top: 24rpx;
  display: flex;
  justify-content: center;
  img {
    width: 30rpx;
    height: 44rpx;
  }
  .today_text {
    font-size: 84rpx;
    font-weight: bold;
    color: #ffffff;
  }
}
.data_yin {
  font-size: 20rpx;
  text-align: center;
  color: #ffffff;
  padding: 32rpx 0 24rpx 0;
}
// .position_box {
//   height: auto;
//   width: auto;
//   border: 2rpx solid #ca4336;
// }
.position_top {
  min-height: 170rpx;
  border: 2rpx solid #ca4336;
  display: flex;
  border-top: none;
}
.caiWei {
  width: 54rpx;
  height: 162rpx;
  background: #ca4336;
  font-size: 20rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-lr;
  margin: 5rpx 4rpx;
}
.position_detail {
  width: 52rpx;
  border: 2rpx solid #ca4336;
  border-top: none;
  border-bottom: none;
}
.shen_box {
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 20rpx;
  color: #262626;
  height: 56rpx;
  border-bottom: 2rpx solid #ca4336;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep ::-webkit-scrollbar {
  // 滚动条整体样式
  display: block;
  width: 10rpx !important;
  height: 10rpx !important;
  -webkit-appearance: auto !important;
  background: transparent;
  overflow: auto !important;
}

::v-deep ::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #e2e2e2 !important;
}

::v-deep ::-webkit-scrollbar-track {
  // 滚动条
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #ededed !important;
}
</style>